<div class="the-world">
    <div class="{% unless section.settings.full_width %} page-width{% endunless %}">
        {% if section.settings.heading != blank %}
        <h2 class="heading title center">{{ section.settings.heading  }}</h2>
        {% endif %}
    <div class="class-world {% unless section.settings.popup %}  popup  {% endunless %}">
            <div class="">
                <div class="content-left">
                    <div class="world-image grid image_1" {{ block.shopify_attributes }}>
                    
                        {%- for block in section.blocks -%}
                            {% case block.type %}
                            {%- when 'image_2' -%}   
                                {% if block.settings.button_link == blank %}
                                <style>
                                    @media (max-height: 796px){
                                    ._cUP1np9gMvFQrcPftuf._Y8HCTxgNkwxXcG_DCXx {
                                        padding: 0;
                                        margin: 0;
                                    }
                                    }
                                    </style>
                                    
                                    <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
                                    <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
                                {% endif %}                       
                                <div class="grid-image grid__item">
                                <a {% if block.settings.button_link != blank %}href="{{ block.settings.button_link }}" {% else %} href="javascript:void(0)" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/tenwaysebike/amsterdam-pop-up'});return false;" {% endif %} class="block_a block_{{ forloop.index0 }}" {% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}> 
                                <div class="pc_banner hover-img image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                            {% if block.settings.height == 'adapt' and block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
                        >
                            {%- if block.settings.image != blank -%}
                            <img
                                srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                                {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                                {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                                {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                                {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                                {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                                {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                                {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                                data-src="{{ block.settings.image | img_url: '1500x' }}"
                                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                                alt="{{ block.settings.image.alt | escape }}"
                                loading="lazy"
                                class="lazyload"
                                width="{{ block.settings.image.width }}"
                                height="{{ block.settings.image.height }}"
                            >
                            {%- else -%}
                            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                            {%- endif -%}
                              </div>
                            <div class="image_mobile image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                        {% if block.settings.height == 'adapt' and block.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
                    >
                        {%- if block.settings.image_mobile != blank -%}
                        <img
                        srcset="{%- if block.settings.image_mobile.width >= 375 -%}{{ block.settings.image_mobile | img_url: '375x' }} 375w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 412 -%}{{ block.settings.image_mobile | img_url: '412x' }} 412w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 750 -%}{{ block.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 1100 -%}{{ block.settings.image_mobile | img_url: '1100x' }} 1100w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 1500 -%}{{ block.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 1780 -%}{{ block.settings.image_mobile | img_url: '1780x' }} 1780w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 1903 -%}{{ block.settings.image_mobile | img_url: '1903x' }} 1903w,{%- endif -%}
                        {{ block.settings.image_mobile | img_url: 'master' }} {{ block.settings.image_mobile.width }}w"
                        sizes="{% if block.settings.image_2 != blank and block.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif block.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
                        src="{{ block.settings.image_mobile | img_url: '1500x' }}"
                        loading="lazy"
                        alt="{{ block.settings.image_mobile.alt | escape }}"
                        width="{{ block.settings.image_mobile.width }}"
                        height="{{ block.settings.image_mobile.width | divided_by: block.settings.image_mobile.aspect_ratio }}"
                        >
                        {%- else -%}
                        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                        {%- endif -%}
                            </div>
                            </a>
                            <div>
                                {% if block.settings.title != blank  %}
                                   <h4>{{ block.settings.title }}</h4>
                                {% endif %}
                                {% if block.settings.text != blank  %}
                                   <div class="p">  {{ block.settings.text }}</div>
                                {% endif %}
                            </div>
                                </div>
                       
                            {%- endcase -%}
                        {%- endfor -%}
                    </div>
                </div>
                <div class="content-right">
                    <div class="world-image grid image_2" {{ block.shopify_attributes }}>
                        {%- for block in section.blocks -%}
                            {% case block.type %}                                                         
                                {%- when 'image_1' -%}
                              <div class="grid-image grid__item">
                                <a {% if block.settings.button_link != blank %}href="{{ block.settings.button_link }}" {% endif %} class="block_a " {% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}> 
                                 <div class="pc_banner hover-img image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                                 {% if block.settings.height == 'adapt' and block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
                             >
                                 {%- if block.settings.image != blank -%}
                                 <img
                                     srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                                     {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                                     {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                                     {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                                     {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                                     {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                                     {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                                     {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                                     data-src="{{ block.settings.image | img_url: '1500x' }}"
                                     sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                                     alt="{{ block.settings.image.alt | escape }}"
                                     loading="lazy"
                                     class="lazyload"
                                     width="{{ block.settings.image.width }}"
                                     height="{{ block.settings.image.height }}"
                                 >
                                 {%- else -%}
                                 {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                                 {%- endif -%}
                                 </div>
                                 <div class="image_mobile image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                             {% if block.settings.height == 'adapt' and block.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
                         >
                             {%- if block.settings.image_mobile != blank -%}
                             <img
                             srcset="{%- if block.settings.image_mobile.width >= 375 -%}{{ block.settings.image_mobile | img_url: '375x' }} 375w,{%- endif -%}
                             {%- if block.settings.image_mobile.width >= 412 -%}{{ block.settings.image_mobile | img_url: '412x' }} 412w,{%- endif -%}
                             {%- if block.settings.image_mobile.width >= 750 -%}{{ block.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
                             {%- if block.settings.image_mobile.width >= 1100 -%}{{ block.settings.image_mobile | img_url: '1100x' }} 1100w,{%- endif -%}
                             {%- if block.settings.image_mobile.width >= 1500 -%}{{ block.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
                             {%- if block.settings.image_mobile.width >= 1780 -%}{{ block.settings.image_mobile | img_url: '1780x' }} 1780w,{%- endif -%}
                             {%- if block.settings.image_mobile.width >= 1903 -%}{{ block.settings.image_mobile | img_url: '1903x' }} 1903w,{%- endif -%}
                             {{ block.settings.image_mobile | img_url: 'master' }} {{ block.settings.image_mobile.width }}w"
                             sizes="{% if block.settings.image_2 != blank and block.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif block.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
                             src="{{ block.settings.image_mobile | img_url: '1500x' }}"
                             loading="lazy"
                             alt="{{ block.settings.image_mobile.alt | escape }}"
                             width="{{ block.settings.image_mobile.width }}"
                             height="{{ block.settings.image_mobile.width | divided_by: block.settings.image_mobile.aspect_ratio }}"
                             >
                             {%- else -%}
                             {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                             {%- endif -%}
                                 </div>
                                 </a>
                                 <div>
                                     {% if block.settings.title != blank  %}
                                        <h4>{{ block.settings.title }}</h4>
                                     {% endif %}
                                     {% if block.settings.text != blank  %}
                                     <div class="p">  {{ block.settings.text }}</div>
                                  {% endif %}
                                 </div>
                               </div>
                            {%- endcase -%}
                        {%- endfor -%}
                    </div>
                </div> 
                       
        {%- if section.settings.read_more != blank -%}
                <div class="tenways-read_more center">
                  <span class="read_more">
                    {{ section.settings.read_more }}
                  </span>
                </div>
       {%- endif -%}   
       
            </div>
        </div>
    </div>
</div>




{% schema %}
    {
      "name": "The world",
      "tag": "section",
      "class": "spaced-section spaced-section--full-width",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        },
        {
        "type": "checkbox",
        "id": "full_width",
        "label": "t:sections.video.settings.full_width.label",
        "default": true
       },
       {
        "type": "checkbox",
        "id": "popup",
        "label": "popup",
        "default": false
       },
       {
      "type": "text",
      "id": "read_more",
      "default": "Read more",
      "label": "Read more"
    }
      ],
      "blocks": [
        {
        "type": "image_1",
        "name": "image_1",
        "settings": [
        {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
        },
           {
            "type": "url",
            "id": "button_link_us",
            "label": "Button link US"
        },
            {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
            },
            {
            "type": "image_picker",
            "id": "image_mobile",
            "label": "Image mobile"
            },
            {
            "type": "text",
            "id": "title",
            "label": "Title"
            },
            {
            "type": "richtext",
            "id": "text",
            "label": "Text"
            },
          {
            "type": "richtext",
            "id": "text_us",
            "label": "Text US"
            },
            {
            "type": "select",
            "id": "height",
            "options": [
                {
                "value": "adapt",
                "label": "adapt"
                },
                {
                "value": "small",
                "label": "small"
                },
                {
                "value": "large",
                "label": "large"
                }
            ],
            "default": "adapt",
            "label": "adapt"
            }
      ]
    },
    {
        "type": "image_2",
        "name": "image_2",
        "settings": [
            {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
        },
            {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
            },
            {
            "type": "image_picker",
            "id": "image_mobile",
            "label": "Image mobile"
            },
            {
            "type": "text",
            "id": "title",
            "label": "Title"
            },
            {
            "type": "richtext",
            "id": "text",
            "label": "Text"
            },
            {
            "type": "select",
            "id": "height",
            "options": [
                {
                "value": "adapt",
                "label": "adapt"
                },
                {
                "value": "small",
                "label": "small"
                },
                {
                "value": "large",
                "label": "large"
                }
            ],
            "default": "adapt",
            "label": "adapt"
            }
      ]
    }
      ],
      "presets": [
        {
            "name": "The world"
        }
      ]
    }
      {% endschema %}